/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-01-12 22:43:07
 */
import { defineComponent, PropType } from 'vue'
import { ContextmenuItem } from './interface'
import './style.scss'
const props = {
	menus: {
		type: Array as PropType<ContextmenuItem[]>,
		required: true,
	},
	handleClickMenuItem: {
		type: Function,
		required: true,
	},
}
export default defineComponent({
	name: 'menu-content',
	props,
	setup(props) {
		return () => (
			<ul class="menu-content">
				{props.menus?.map((menu) => {
					return (
						!menu.hide && (
							<li
								onClick={() => {
									props.handleClickMenuItem && props.handleClickMenuItem(menu)
								}}
								class={{ divider: menu.divider, disable: menu.disable, 'menu-item': true }}
							>
								{!menu.divider && (
									<div
										class={{
											'has-children': menu.children,
											'has-handler': menu.handler,
											'menu-item-content': true,
										}}
									>
										<span class="text">{menu.text}</span>
										{menu.subText && !menu.children && <span class="sub-text">{menu.subText}</span>}
										{menu.children && menu.children.length && (
											<menu-content
												class="sub-menu"
												menus={menu.children}
												onClick={() => {
													props.handleClickMenuItem && props.handleClickMenuItem(menu)
												}}
											/>
										)}
									</div>
								)}
							</li>
						)
					)
				})}
			</ul>
		)
	},
})
